<template>
  <div class="container">
    <el-card class="box-card marginBottom" >
      <div slot="header" class="clearfix">
        <span>订单基本信息</span>
      </div>
      <div class="text">
        <el-row :gutter="20" class="marginBottom">
          <el-col :span="12">
            <div class="item">
              <div class="mark">店铺名称:</div>
              <div class="value">{{ order.shopName }}</div>
            </div>
            <div class="item">
              <div class="mark">店铺地址:</div>
              <div class="value">{{ order.address }}</div>
            </div>
            <div class="item">
              <div class="mark">联系方式:</div>
              <div class="value">{{ order.phone }}</div>
            </div>
            <div class="item">
              <div class="mark">下单时间:</div>
              <div class="value">{{ order.createTime }}</div>
            </div>
            <div class="item">
              <div class="mark">订单完成时间:</div>
              <div class="value">{{ order.completeTime }}</div>
            </div>
            <div class="item">
              <div class="mark">运行程序:</div>
              <div class="value">{{ computedProgram(order.program) }}</div>
            </div>
            <div class="item">
              <div class="mark">订单状态:</div>
              <div class="value">{{ computedStatus(order.status) }}</div>
            </div>
            <div class="item">
              <div class="mark">所需价格:</div>
              <div class="value">{{ order.price }}</div>
            </div>
            <div class="item">
              <div class="mark">支付价格:</div>
              <div class="value">{{ order.payMoney }}</div>
            </div>
            <div class="item">
              <div class="mark">配送地址:</div>
              <div class="value">{{ order.detailAddress }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item">
              <div class="mark">文件总页数:</div>
              <div class="value">{{ order.num }}</div>
            </div>
            <div class="item">
              <div class="mark">色彩:</div>
              <div class="value">{{ computedColor }}</div>
            </div>
            <div class="item">
              <div class="mark">方向:</div>
              <div class="value">{{ computedDirection }}</div>
            </div>
            <div class="item">
              <div class="mark">纸张:</div>
              <div class="value">{{ order.paper }}</div>
            </div>
            <div class="item">
              <div class="mark">页:</div>
              <div class="value">{{ computedPage }}</div>
            </div>
            <div class="item">
              <div class="mark">备注:</div>
              <div class="value">{{ order.remark }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="marginBottom">
      <div slot="header" class="clearfix">
        <span>订单当前状态</span>
      </div>
      <el-steps :active="order.status">
        <el-step title="订单已提交" :description="order.createTime"></el-step>
        <el-step title="商家已接收文件" description="等待打印"></el-step>
        <el-step
          title="文件打印完成"
          :description="order.completeTime"
        ></el-step>
        <el-step
          v-if="order.program == 1"
          title="配送完成"
          description="等待配送"
        ></el-step>
      </el-steps>
    </el-card>
    <el-card class="marginBottom">
      <div slot="header" class="clearfix">
        <span>文件列表</span>
      </div>
      <el-table :data="order.files" border style="width: 100%">
        <el-table-column prop="fileName" label="文件名称">
          <template slot-scope="scope">
            {{ computedFileName(scope.row.fileName) }}
          </template>
        </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
            <el-button
              size="mini"
              type="primary"
              @click="handleView(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getOrder } from "@/api/order";
import { getProgram, getStatus } from "@/utils/index";
export default {
  name: "detail",
  data() {
    return {
      orderId: "",
      order: {},
    };
  },
  computed: {
    computedColor: function () {
      return this.order.color == "dark" ? "黑白" : "彩色";
    },
    computedDirection: function () {
      return this.order.direction == "row" ? "横向" : "纵向";
    },
    computedPage: function () {
      return this.order.page == "single" ? "单页" : "双页";
    },
  },
  methods: {
    getData() {
      getOrder(this.orderId)
        .then((result) => {
          this.order = result.data;
        })
        .catch(() => {});
    },
    computedProgram(program) {
      return getProgram(program);
    },
    computedStatus(status) {
      return getStatus(status);
    },
    handleView(index, row) {
      const {viewPath} = row;
      const url = `http://127.0.0.1:7001${viewPath}`;
      let encodeUrl = encodeURIComponent(this.$base.encode(url));
      window.open(`http://127.0.0.1:8012/onlinePreview?url=${encodeUrl}&officePreviewType=pdf`);
    },
    computedFileName(fileName) {
      if (!fileName) {
        return "";
      }
      return fileName.substring(32);
    },
  },
  created() {
    const { id } = this.$router.history.current.query;
    this.orderId = id;
    this.getData();
  },
};
</script>
<style lang="scss">
.item {
  display: flex;
  justify-content: flex-start;
  padding: 10px 32px;
  padding-left: 0;
  .mark {
    color: #8f8f8f;
    margin-right: 4px;
  }
  .value {
    text-indent: 8rpx;
  }
}
</style>